<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人员管理系统</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        #app {
            width: 1190px;
            margin: 0 auto;

        }

        .top {
            display: flex;
            align-items: center;
            height: 92px;
            margin-bottom: 50px;
            line-height: 92px;
            background-color: rgb(242, 242, 242);
        }

        .top span {
            margin: 0 20px;
            font-size: 20px;
        }

        .input {
            width: 200px;
            height: 30px;
            padding-left: 10px;
            margin-right: 20px;
            border: 1px solid;
            border-radius: 5px;
            outline: none;

        }

        .search {
            width: 75px;
            height: 30px;
            background-color: #409EFF;
            border: 1px solid;
            border-radius: 5px;
            outline: none;
            font-size: 16px;
        }

        table,
        tr,
        th,
        td {
            width: 100%;
            border: 1px solid;
            border-collapse: collapse;
        }

        .tr {
            position: relative;
            display: flex;
            justify-content: space-between;
        }

        th,
        td {
            width: 200px;
            height: 50px;
            padding-left: 15px;
            text-align: left;
            white-space: normal;
        }
        .edit{
            width: 50px;
            height: 30px;
            outline: none;
            border: none;
        }
        .del{
            width: 50px;
            height: 30px;
            background-color: rgb(245,108,108);
            outline: none;
            border: none;
        }

        .prompt {
            position: fixed;
            top: 30%;
            left: 40%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            width: 300px;
            height: 300px;
            padding: 15px;

            border-radius: 10px;
            background-color: orange;
        }

        .prompt input {
            width: 265px;
            height: 37px;
            border-radius: 5px;
            outline: none;
            border: 1px solid;
            padding-left: 10px;
            font-size: 16px;
        }

        .btn button {

            width: 55px;
            height: 30px;
            border: none;
            color: blanchedalmond;

        }

        .btn button:nth-last-of-type(2) {
            /* margin-left: 150px; */
            background-color: rgb(245, 108, 108);
        }

        .btn button:nth-last-of-type(1) {
            background-color: rgb(64, 158, 255);
        }

        .arrow {
            width: 14px;
            height: 17px;
        }
     
        .shadow{
            width: 100%;
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.5);
        }
    </style>
</head>

<body>

    <div id="app" >
        <div class="top">
            <span>姓名</span>
            <input type="text" placeholder="请输入姓名" class="input" v-model="hotKey">
            <button class="search" v-on:click="searchClick">搜索</button>
        </div>
        <table class="mid">
            <thead>
                <tr>
                    <th>
                        日期
                        <button class="arrow" @click="toggleOrder">
                            <img :src="isHas" alt="">
                        </button>
                    </th>
                    <th>姓名</th>
                    <th>地址</th>
                    <th>邮箱</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in searchList">
                    <td>{{item.date}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.address}}</td>
                    <td>{{item.postCode}}</td>
                    <td>
                        <button v-on:click="editClick(index)" class="edit">编辑</button>
                        <button v-on:click="delClick(index)" class="del">删除</button>
                    </td>

                </tr>
            </tbody>
        </table>
        <div class="shadow" v-show="editFlag">
            <div class="prompt">
                <h4>姓名</h4>
                <input type="text" v-model="name">
                <h4>地址</h4>
                <input type="text" v-model="address">
                <h4>邮编</h4>
                <input type="text" v-model="postCode">
                <div class="btn">
                    <button @click="cancelBtn">取消</button>
                    <button @click="saveBtn">保存</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                hotKey: "",
                list: [
                    {
                        date: "2015-05-01",
                        name: "王小虎",
                        address: "上海市普陀区金沙江路1518弄",
                        postCode: "200333",

                    },
                    {
                        date: "2016-11-04",
                        name: "陈晨",
                        address: "苏州市平江区",
                        postCode: "100000",

                    },
                    {
                        date: "2014-06-25",
                        name: "宁浩",
                        address: "常州市金坛区天宇人家",
                        postCode: "100001",

                    },
                    {
                        date: "2017-05-01",
                        name: "张海",
                        address: "安庆市大观区",
                        postCode: "100002",

                    },
                    {
                        date: "2016-11-05",
                        name: "陈王",
                        address: "合肥市包河区",
                        postCode: "100003",

                    },
                    {
                        date: "2015-05-02",
                        name: "王浩",
                        address: "北京市昌平区",
                        postCode: "100004",

                    },
                ],
                // search后的数组
                searchList: [],
                editFlag: false,
                // 获取对应编辑的索引
                editIndex: 0,
                // 获取编辑input输入框
               
                    date: "",
                    name: "",
                    address: "",
                    postCode: "",
               
                isHas: "img/arrow.png",
                flag: 0,



            },
            // 放在计算属性中 返回的数组
            computed: {
                // searchList(){                
                //         return this.list.filter(item=>item.name.indexOf(this.name)!==-1)
                // }


            },
            created() {
                // 进行初始化searchList
                this.searchList = this.list;
            },
            methods: {
                toggleOrder() {
                    if (this.flag % 2 === 0) {
                        this.isHas = "./img/arrow-up.png"
                        this.searchList.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime())
                    } else {
                        this.isHas = "./img/arrow-down.png"
                        this.searchList.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
                    }
                    this.flag++;
                },

                searchClick() {
                    this.searchList = this.list.filter(item => item.name.indexOf(this.hotKey) !== -1)
                },



                editClick(index) {
                    this.editFlag = true;
                    console.log(index);
                    //    将编辑的索引传入到data中
                    this.editIndex = index;
                    // 有问题
                    // this.editObj=this.list[index];
                    this.date = this.list[index].date;
                    this.name = this.list[index].name;
                    this.address = this.list[index].address;
                    this.postCode = this.list[index].postCode;


                },

                delClick(index) {
                    this.list.splice(index, 1)
                },

                cancelBtn() {
                    this.editFlag = false;

                },
                saveBtn() {
                    this.list.splice(this.editIndex, 1, {
                        date:this.date,
                        name:this.name,
                        address:this.address,
                        postCode:this.postCode
                    })
                    console.log(this.editIndex);
                    this.editFlag = false;
                },

            },

        })


    </script>
</body>

</html>